<template>
	<view style="width: 100%;">
		<view :class="['screen-bar', { 'screen-bar1': shodw }]" :style="{ 'height': height + 'rpx', backgroundColor: bgcolor, }">

			<view :style="{ ...screenStyle }" class="screen-bar">
				<view class="screen-bar-item" @tap.stop="itemClick(index)" v-for="(item, index) in updateArr"
					:key="index"
					:style="{ 'width': (!justifyContent ? 'auto' : (100 / listArr.length) + '%'), 'fontSize': barFontSize + 'rpx', 'color': (currentIndex == index && show1) ? activeColor : barTextColor, justifyContent: justifyContent || 'flex-start', margin: justifyContent ? '0' : '0 20rpx', }">
					<view class="bar-item-text">
						{{ item }}
					</view>
					<image
						src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250421/8e5f9b94d2a15ccb2e604bb64dea5874.png"
						:style="{ 'transform': show1 ? currentIndex == index ? 'rotate(180deg)' : 'rotate(0)' : 'rotate(0)' }">
					</image>
				</view>
			</view>
			<view class="dropdown-box"
				:style="{ 'bottom': '-' + (itemHeight * maxDropdownLength) + 'rpx', 'height': (itemHeight * maxDropdownLength) + 'rpx', backgroundColor: bgcolor, 'opacity': show1 ? '1' : '0', 'display': show1 ? 'block' : 'none' }">
				<view
					style="display: flex; text-align: center; justify-content: flex-start;  position:relative; flex-wrap: wrap;padding: 10rpx 0 0 10rpx; ">
					<view class="dropdown-item" v-for="(item, index1) in itemArr[currentIndex]" :key="index1"
						:class="active[currentIndex] == index1 ? 'activeClass1' : 'activeClass2'"
						@tap.stop="subItemClick(currentIndex, index1)">
						{{ item[showTag] }}
					</view>
				</view>
			</view>
		</view>
		<view class="bg-mask" :class="[show1 && scrollLimit == true ? 'bg-mask-show' : '']" @tap="maskClose"
			@touchmove="touchControl"></view>
	</view>

</template>


<script>
import sheep from "@/sheep"
/**
 *  下拉组件
 * @author xzj
 * @create date 2021-4-3
 * @update user xzj
 * @update date 2021-4-3
 * @note 遮罩层级98 筛选条&下拉层层级99
 **/
export default {
	name: 'com-dropdown-screen',
	data() {
		return {
			sheep,
			active: [0, 0, -1],
			currentIndex: 0,
			currentSubIndex: 0,
			show1: false,
			statusBarHeight: 20,
			scrollLimit: false,
			updateArr: [],
			arrBase64: ''
		};
	},
	computed: {
		maxDropdownLength() {
			return this.itemArr[this.currentIndex].length > this.maxItemCount ? this.maxItemCount : this.itemArr[this
				.currentIndex].length
		}
	},
	onPageScroll(e) {
		if (e.scrollTop > 185) {
			this.scrollLimit = true;
		}
	},
	props: {
		screenStyle: {
			type: Object,
		},
		shodw: {
			type: Boolean,
			default: () => true
		},
		// 筛选条高度 （rpx）
		height: {
			type: Number,
			default: 88
		},
		// 下拉单项高度
		itemHeight: {
			type: Number,
			default: 80
		},
		// 当前文字活跃颜色
		activeColor: {
			type: String,
			default: '#f9782c'
		},
		justifyContent: {
			type: String,
			default: () => 'center'
		},
		//背景颜色
		bgcolor: {
			type: String,
			default: '#fff'
		},
		//下拉标题数组
		listArr: {
			type: Array,
			default: () => {
				return ['全部任务', '全部分类', '智能排序']
			}
		},
		// item数量超过多少开始滚动
		maxItemCount: {
			type: Number,
			default: 5
		},
		//下拉选项数组（二维数组）
		itemArr: {
			type: Array,
			default: () => {
				// 默认值
				let textList = [
					[{
						text: '全部任务',
						value: 0
					},],
					[],
					[{
						text: '智能排序',
						value: 1
					},],
					// 默认值
					// [{
					// 		text: '全部任务',
					// 		value: 0
					// 	},
					// 	{
					// 		text: '团购任务',
					// 		value: 1
					// 	}, {
					// 		text: '电商任务',
					// 		value: 2
					// 	}, {
					// 		text: '直播任务',
					// 		value: 3
					// 	}
					// ],
					// [{
					// 		text: '全部分类',
					// 		value: 9
					// 	},
					// 	{
					// 		text: '美食',
					// 		value: 10
					// 	},
					// 	{
					// 		text: '丽人/美发',
					// 		value: 0
					// 	}, {
					// 		text: '休闲娱乐',
					// 		value: 1
					// 	}, {
					// 		text: '景点/门票',
					// 		value: 2
					// 	}, {
					// 		text: '酒店/民宿',
					// 		value: 3
					// 	}, {
					// 		text: '宠物',
					// 		value: 4
					// 	}, {
					// 		text: '运动健身',
					// 		value: 5
					// 	}, {
					// 		text: '生活服务',
					// 		value: 6
					// 	}, {
					// 		text: '医疗/美容',
					// 		value: 7
					// 	},
					// 	{
					// 		text: '学习/培训',
					// 		value: 8
					// 	},
					// 	{
					// 		text: '医疗/口腔',
					// 		value: 14
					// 	},
					// 	{
					// 		text: '养车/用车',
					// 		value: 11
					// 	},
					// 	{
					// 		text: '母婴',
					// 		value: 12
					// 	},
					// 	{
					// 		text: '电影/演出',
					// 		value: 13
					// 	}

					// ],
					// [{
					// 	text: '智能排序',
					// 	value: 1
					// },
					// 	{
					// 	text: '离我最近',
					// 	value: 1
					// }, {
					// 	text: '最新上架',
					// 	value: 2
					// }, {
					// 	text: '佣金最高',
					// 	value: 3
					// }, {
					// 	text: '探店最多',
					// 	value: 4
					// }, {
					// 	text: '效率最高',
					// 	value: 5
					// }, {
					// 	text: '折扣最大',
					// 	value: 6
					// }]
				]
				return textList
			}
		},
		// 选项左偏移
		itemPadding: {
			type: Number,
			default: 24
		},
		// 能否遮罩关闭
		maskTouch: {
			type: Boolean,
			default: true
		},
		// 是否需要选择后替换标题
		isNeedChangeTitle: {
			type: Boolean,
			default: true
		},
		// 标题字号
		barFontSize: {
			type: Number,
			default: 28
		},
		//标题颜色
		barTextColor: {
			type: String,
			default: '#666'
		},
		//下拉字号
		itemFontSize: {
			type: Number,
			default: 26
		},
		// 下拉文字颜色
		itemTextColor: {
			type: String,
			default: '#666'
		},
		// 需要展示的字段，比如你的数据是item.name 这里填的就是name
		showTag: {
			type: String,
			default: 'text'
		},
		// 是否要滑动关闭
		isTouchPrevent: {
			type: Boolean,
			default: true
		},
		// 自定义事件的索引数组
		customIndexArr: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	mounted() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 165;
		this.updateArr = [...new Set(this.listArr)]
	},
	methods: {
		itemClick(index) {
			if (this.customIndexArr.includes(index)) {
				this.show1 = false
				this.$emit('customClick', {
					'$index': index
				})
				return
			}
			if (this.currentIndex == index) {
				this.show1 = !this.show1
			} else {
				this.currentIndex = index
				this.show1 = true
			}
		},
		subItemClick(currentIndex, index) {
			this.currentSubIndex = index;
			this.active[currentIndex] = index;
			if (this.isNeedChangeTitle) {
				if (currentIndex == 0) {
					if (this.itemArr[1].length == 0) {
						this.updateArr.splice(1, 1, this.listArr[1])
					} else {
						this.updateArr.splice(1, 1, this.itemArr[1][0][this
							.showTag
						])
					}
					this.active[1] = 0;

				}
				this.updateArr.splice(this.currentIndex, 1, this.itemArr[this.currentIndex][this.currentSubIndex][this
					.showTag
				])


			}
			this.$emit('finish', {
				'$index': this.currentIndex,
				...this.itemArr[this.currentIndex][this.currentSubIndex]
			})
			this.show1 = false
		},
		maskClose() {
			if (!this.maskTouch) return
			this.show1 = false
		},
		//
		touchControl() {
			if (this.isTouchPrevent) {
				this.maskClose()
			}
		}
	}
}
</script>

<style lang="scss">
.screen-bar {
	width: 100%;
	display: flex;
	position: relative;
	z-index: 12;
}

.screen-bar1::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 1rpx;
	// background-color: #EEEEEE;
	bottom: -1rpx;
	left: 0;
	z-index: 15
}

.screen-bar-item {
	font-weight: 700;
	height: 100%;
	display: flex;
	align-items: center;
}

.screen-bar-item image {
	width: 24rpx;
	height: 24rpx;
	display: block;
	margin-left: 12rpx;
	transition: all .3s;
	flex-shrink: 0;
}

.dropdown-box {
	position: absolute;
	z-index: 12;
	width: 100%;
}

.dropdown-item {
	padding: 10rpx;
	width: 80px;
	margin: 10rpx;
	font-size: 26rpx;
	border-radius: 10px;
	white-space: nowrap;
}


.activeClass2 {
	background-color: rgba(0, 0, 0, 0.05);
	color: #666;
}

.activeClass1 {
	background-color: #f9782c;
	color: #EEEEEE;
}

.bg-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 10;
	transition: all 0.3s ease-in-out;
	opacity: 0;
	visibility: hidden;
}

.bg-mask-show {
	visibility: visible;
	opacity: 1;
}

.bar-item-text {
	max-width: 120rpx;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-weight: normal;

}
</style>